<div class="contentBarBox">
    <% if ((contentTitle != "Login") && (contentTitle != "Register")) { %>
        <div class="barHeader">
            <span><%= contentTitle %></span>
        </div>
    <% } %>


    <% if (contentTitle == "Task") { %>
        <div class="userTaskBox">
        <!--    This is a personal center module     -->
            <% for(var i = 0; i < user.taskNum; i++) { %>
                <div class="userTask clearfix">
                    <h3><%= user.taskTitle[i] %></h3>

                    <div>
                        <p><%= user.taskContent[i] %></p>
                    </div>

                    <div class="taskDateBox float-lg-right">
                        <span><%= user.taskPublisher[i] %></span>
                        <span><%= user.taskDate[i] %></span>
                    </div>
                </div>
            <% } %>
        </div>

    <% } else if (contentTitle == "Settings") { %>
        <!--    This is a module for personal information settings     -->
        <form action="/users" autocomplete="off" method="post" enctype="multipart/form-data"  class="moduleBox">
            <h3 class="moduleTitle text-center">Modify settings</h3>

            <div class="inputBox">
                <h3>Username :</h3>
                <div class="input">
                    <b class="fa fa-user-o"></b>
                    <input type="text" name="userName" autocomplete="off" placeholder="Please input username" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Password :</h3>
                <div class="input">
                    <b class="fa fa-lock"></b>
                    <input type="password" name="passWord" autocomplete="off" placeholder="Please input password" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Self introduction :</h3>
                <textarea autocomplete="off" name="selfIntroduction" placeholder="Please input introduction" onblur="AntiSqlValid(this)"></textarea>
            </div>

            <div class="inputBox">
                <h3>Choice permissions :</h3>
                <div class="input">
                    <b class="fa fa-address-book"></b>
                    <input type="text" name="permissions" autocomplete="off" list="permissionsList" placeholder="Please input permissions" onblur="AntiSqlValid(this)">
                    <datalist id="permissionsList">
                        <option>admin</option>
                        <option>user</option>
                    </datalist>
                </div>
            </div>

            <button class="submitButton" type="submit" onclick="return submitForm('userSetting')">Modify</button>

        </form>

    <% } else if (contentTitle == "Release") { %>
        <!--    This is the module of the mission center     -->
        <form action="/users" autocomplete="off" method="post" enctype="multipart/form-data"  class="moduleBox">
            <h3 class="moduleTitle text-center">Create Task</h3>

            <div class="inputBox">
                <h3>Task title :</h3>
                <div class="input">
                    <b class="fa fa-pencil"></b>
                    <input type="text" name="taskTitle" autocomplete="off" placeholder="Please input task title" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Deadline :</h3>
                <div class="input">
                    <b class="fa fa-hourglass-half"></b>
                    <input type="text" name="deadline" autocomplete="off" placeholder="Please input deadline" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Task content :</h3>
                <textarea autocomplete="off" name="taskContent" placeholder="Please input task content" onblur="AntiSqlValid(this)"></textarea>
            </div>

            <div class="inputBox">
                <h3>Select members :</h3>
                <div class="input">
                    <b class="fa fa-address-book"></b>
                    <input type="text" name="taskMember" autocomplete="off" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <button class="submitButton" type="submit" onclick="return submitForm('missionCenter')">Submit</button>

        </form>

    <% } else if (contentTitle == "Login") { %>
        <div class="moduleBox">
            <h3 class="moduleTitle text-center"><%= contentTitle %></h3>

            <div class="inputBox">
                <h3>Username :</h3>
                <div class="input">
                    <b class="fa fa-user-o"></b>
                    <input type="text" name="userNameLogin" autocomplete="off" placeholder="username" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Password :</h3>
                <div class="input">
                    <b class="fa fa-lock"></b>
                    <input type="password" name="passWordLogin" autocomplete="off" placeholder="password" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <a href="#" class="changeButton" id="toRegister">
                <span class="fa fa-share"></span>
                To register
            </a>

            <div class="inputBox">
                <button class="submitButton" type="submit" onclick="return submitForm('loginRegister')"><%= contentTitle %></button>
            </div>

        </div>

    <% } else if (contentTitle == "Register") { %>
        <div class="moduleBox">
            <h3 class="moduleTitle text-center"><%= contentTitle %></h3>

            <div class="inputBox">
                <h3>Username :</h3>
                <div class="input">
                    <b class="fa fa-user-o"></b>
                    <input type="text" name="userNameRegister" autocomplete="off" placeholder="username" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Password :</h3>
                <div class="input">
                    <b class="fa fa-lock"></b>
                    <input type="password" name="passWordRegister" autocomplete="off" placeholder="password" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Input password again :</h3>
                <div class="input">
                    <b class="fa fa-lock"></b>
                    <input type="password" name="passWordAgain" autocomplete="off" placeholder="password again" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <div class="inputBox">
                <h3>Email :</h3>
                <div class="input">
                    <b class="fa fa-envelope-open-o"></b>
                    <input type="text" name="email" autocomplete="off" placeholder="email" onblur="AntiSqlValid(this)">
                </div>
            </div>

            <a href="#" class="changeButton" id="toLogin">
                <span class="fa fa-share"></span>
                To login
            </a>

            <div>
                <button class="submitButton" type="submit" onclick="return submitForm('loginRegister')"><%= contentTitle %></button>
            </div>
        </div>
    <% } %>
</div>